<template>
  <div class="company-page">
    <company-header @changeParams="changeParams" :loading="loading"></company-header>
    <div class="company-container">
      <div class="position-div" ref="positionDiv"></div>
      <company-block
        v-for="(item, index) in companyList"
        :key="index"
        :company="item"
      ></company-block>
      <div class="load-more-wrap">
        <div v-if="!loading" >
          没有更多数据了，
          <span class="text" @click="refresh">刷新试试</span>
        </div>
        <div v-else class="huobo huobo-loading"></div>
      </div>
    </div>
  </div>
</template>

<script>
import CompanyHeader from './components/Header.vue';
import CompanyBlock from './components/Block.vue';

export default {
  name: 'CompanyList',
  data() {
    return {
      companyList: [],
      noData: false,
      loading: false,
      params: {
        page: 1
      },
      per_page: 10
    };
  },
  components: {
    CompanyHeader,
    CompanyBlock
  },
  mounted() {
    const that = this;
    const intersectionObserver = new IntersectionObserver(entries => {
      const { isIntersecting } = entries[0];
      if (isIntersecting && !this.noData) {
        that.getData();
      }
    });
    intersectionObserver.observe(this.$refs.positionDiv);
  },
  methods: {
    changeParams(params) {
      params.page = 1;
      this.params = params;
      this.companyList = [];
      this.getData();
    },
    refresh() {
      // 不是整页数据，刷新要请求本页数据
      if (this.companyList.length % this.per_page) {
        this.params.page -= 1;
      }
      this.getData();
    },
    // 请求数据
    getData() {
      this.loading = true;
      this.$api.getCompanyData(this.params)
        .then(data => {
          this.per_page = data.per_page;
          this.params.page += 1;
          this.loading = false;
          data = data.data;
          const remain = this.companyList.length % this.per_page; // 当前页有n条，刷新当前页时，应该跳过这n条
          // 不是整页数据
          if (remain) {
            data = data.slice(remain);
          }
          this.companyList.push(...data);
          this.noData = !data.length;
        }).catch(() => {
          this.$message({
            type: 'error',
            message: '请求数据失败，请重新请求'
          });
        }).finally(() => {
          this.loading = false;
        });
    },
  }
};
</script>

<style lang="less" scoped>
  @import '../../less/global.less';
  .company-container {
    position: relative;
  }
  .load-more-wrap {
    padding: 0;
    line-height: 24px;
    text-align: center;
    .text {
      color: @mainBgColor;
      cursor: pointer;
    }
    .huobo-loading {
      margin: 0 auto;
      width: 20px;
      color: @mainBgColor;
      animation: loading 1s linear infinite;
      @keyframes loading {
        0% {
          transform: rotate(0);
        };
        50% {
          transform: rotate(180deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
  .position-div {
    position: absolute;
    bottom: 400px;
    width: 100%;
  }
</style>
